<template>
  <div class="home">
    <div class="title">
      <span>关于我们——{{User.showTitle}}</span>
    </div>
    <div class="content">
      <div class="content-center">
        <ul @mousewheel="scrollChange" class="files-detail">
          <li class="item form-part" v-for="(item, index) in formTitle" :key ="index" style="" :id="item.id">
            <div style=" text-indent: 2em">
              <Editor
                  style="min-height: 500px; overflow-y: hidden;"
                  v-model="item.article"
                  :defaultConfig="editorConfig"
                  :mode="mode"
                  @onCreated="onCreated"
              />
            </div>
          </li>
        </ul>
        <Anchor ref="anchor" :list="formTitle" />
      </div>

    </div>
  </div>
</template>

<script>
import Anchor from "@/views/reception/aboutUs/anchor.vue";
import {Editor} from "@wangeditor/editor-for-vue";
import {useUser} from "@/store/userStore";

export default {

  name: 'Home',
  components: {
    Anchor,Editor
  },
  data() {
    return {
      User:useUser(),
      formTitle: [
        {
          id: 'anchor_1',
          title:'村落概括',
          // 默认选择
          checked:true,
          article:`<h2 style="text-align: center;"><span style="font-family: 宋体;"><strong>走进千年古村|千亩小布 </strong></span></h2><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">小布村南宋时有欧姓、刘姓等族人到该地开村，原名“桂圃”，后有何姓迁入，分为“大圃”和“小圃”。何姓居住“小圃”，随着欧姓、刘姓向外搬迁，何姓将“桂圃”更名为“小圃”，后因音相似而称为“小布”。这里是明嘉靖年间福建按察使何继之的故乡。</span></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">小布村位于乐从镇北入口，北傍东平河，西倚325国道，陆贯南北、水潮东西。改革开放之后，小布凭借乐从钢铁市场的发展，涌现出一大批商海弄潮的企业家，使小布远近闻名。</span><span style="font-family: 宋体;"><br> &nbsp; </span><span style="color: black; background-color: white; font-family: 宋体;">然而穿过繁华，这个有着660多年历史的古村落才真正展现出其传承百年的贵气。根据小布现存何姓族谱记载，自明成化至清宣统年间小布何氏共出了9名进士、13名举人及260多名历史名人。</span></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">小布古称桂圃，在同一姓氏的人群中，有那么多子弟蟾宫折桂，其科甲之鼎盛堪称奇迹。若将这些优秀的子弟比作玉桂芝兰，当年的桂圃飘香之景不禁让后人遥想追思不已。</span><span style="font-family: 宋体;"><br> &nbsp; </span><span style="color: black; background-color: white; font-family: 宋体;">小布村历史悠久，明清时期更是人才辈出，因此曾有“屡朝恩宠，亦世科第”的牌坊，为村内留存的五个文物古迹之一，另外四个为“时庵书塾”、“何氏大宗祠”、“大夫祠”及“何云庵夫妇墓”，现时保存较好的古迹有“何氏大宗祠”。</span></p><p><span style="font-family: 宋体;"> </span></p><h3><strong>&gt;“金手印御史”的故事</strong></h3><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">何沾，是明弘治十五年（1502年）进士，历官行人司行人、南京监察御史。</span></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;"><strong>相传正德初年，何沾出使安南，顺利归化安南国王，前来朝贡；在面圣受嘉奖时，正德皇帝问他为什么不下跪谢恩，才发现何沾跪下后跟平常人站立一样高，于是亲切地用手按在他右肩之上，称赞说“卿家真是好汉相”。</strong></span></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">退朝后，太师梁储建议何沾在衣肩绣上金手掌印用来纪念，然后梁储又以何沾肩膊上有恩赐龙掌为由，要得恩赐黄罗伞一把，以护遮龙掌之用。</span></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;"><strong>从此，人们便尊称何沾为“金手印御史”，因其出行均有黄罗伞随同，便有“小布黄罗伞”之称。</strong></span></p><p style="text-indent: 25.6pt; text-align: center;"><span style="font-family: 宋体;"> &nbsp;</span><img src="http://localhost:9090/images/b8d1d894b3934ac3824040317afcdf8b.jpg" alt="" data-href="" style="width: 356.00px;height: 497.22px;"></p><p style="text-align: center;"><span style="font-family: 宋体;">（“何沾御史的故事”手稿其中一页）</span></p><p style="text-align: center;"><br></p><h3><strong>&gt;累朝恩宠牌坊</strong></h3><p style="text-align: center;"><img src="http://localhost:9090/images/6fe524bec6234871a777c939a5350e79.jpg" alt="" data-href="" style="width: 678.00px;height: 380.83px;"></p><p><br></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">明嘉靖年间小布就有“累朝恩宠”之牌坊。该牌坊位于小布北堤外，以麻石树立，为小布何球一家都考获举人并出仕立，表示皇朝封赠的恩典，是顺德罕有的明代牌坊。</span></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">在桂圃，因为科举、官吏之盛，官坊林立。《顺德县志》中记载，在平步堡，为御史何玛、何沾、何见魁，立“绣衣坊”；为国子监学正、赣州郡丞何文伟，立“司成大夫”；为荆门知州何抢，立“五马行春”；为福州知府赐一品服奉使安南何沾，立“柱史大夫”；为进士布政何继之，进士、主事何淳等，立“世进士”；为封知府何华、何冲，赠郎中何衡，封御史何淘、何瑀，立“世沐恩裹”；为明参议何琼等，立“奕世科第”；为举人何球子，举人、知县汴孙，举人、知县右之，立“累朝恩宠”。</span></p><h3><strong>&gt;时庵家塾</strong></h3><p style="text-align: center;"><img src="http://localhost:9090/images/f5e566619c084f0f95334a9208e06ed9.jpg" alt="" data-href="" style="width: 789.00px;height: 529.48px;"></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">正是由于先祖耕读传家，小布村中后生受良好文化氛围熏陶，立下读书济世的志向，在前辈激励中不断奋发，才在科举仕途中不断有所作为。“诗书簪缨之盛，为望一乡”，小布村在各个历史时期涌现了不少的名人，尤其以明清之间，最为鼎盛。其中明清时期有进士9名，举人13名，贡生7名，其他名人 239 名。而在《顺德县志》中记载的仕宦(文职)就有5人，受封荫（文阶）就有7人。这一切证明了时庵家塾功不可没。</span></p><p style="text-indent: 25.6pt;"><br></p><h3><strong>&gt;何云庵夫妇墓</strong></h3><p style="text-indent: 25.6pt; text-align: center;"><img src="http://localhost:9090/images/7d6ae65370084f36b19289efc130bbe2.jpg" alt="" data-href="" style="width: 748.00px;height: 554.45px;"></p><p style="text-indent: 25.6pt; text-align: center;"><br></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">该古墓为何云庵夫妇墓，建于明代，墓冢为石棺材形状，高出地面约一米，墓埤清晰可见，是顺德罕见的明代古墓，2003年被顺德区政府列为保护墓葬。</span></p><p style="text-indent: 25.6pt;"><br></p><h3><strong>&gt;小布码头</strong></h3><p style="text-align: center;"><img src="http://localhost:9090/images/7ee4ea117e6347ef9dc16c2fd7b7470a.jpg" alt="" data-href="" style=""></p><p style="text-align: center;"><br></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">小布码头有着百年历史，不但连接着乐从与外界的交往，更是乐从商贸的见证。</span></p>`
        },
        {
          id: 'anchor_2',
          title:'祠堂',
          article:`<p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">村内现存的祠堂有五座，分别是：何氏大宗祠、大夫祠、元夫祠、新南祠、四庵祖祠，其中以何氏大宗祠最具特色。</span></p><h3><strong>&gt;何氏大宗祠</strong></h3><p style="text-align: center;"><img src="http://localhost:9090/images/7eddc4855886419db3a349dfd4ae62ee.jpg" alt="" data-href="" style="width: 710.00px;height: 473.14px;"></p><p style="text-align: center;"><br></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">小布是远近闻名的举人村，全村至少出过8个举人，何氏大宗祠前现存7对旗杆夹，保存共计22对旗杆夹。宗祠建于明永乐四年(1406年)，是典型的顺德宗祠建筑。正面的门口是一正四侧门，俗称“五庙”，正门有高包台，建筑品位较高，是四合院形式，两侧各有两间衬祠；硬山顶、灰塑博古脊、“人”字封火山墙。素胎瓦当、滴水剪边；墙体、屋脊、梁柱均以砖雕、石刻、灰塑等装饰，做工精细；横梁有巖金木通花图案，瓦脊陶饰灰雕、四方瓦筒(注：四方瓦筒须经朝廷特许)，雕刻图案除了花草树木还有人物造型，正门石柱更罕有“皇罗伞”人物的石雕；地面铺以整条长麻石。在古时“皇罗伞”是皇家专用物，在宗族祠堂中被允许使用，则彰显着一个家族莫大的荣耀。</span></p><p style="text-indent: 25.6pt;"><br></p><p style="text-indent: 25.6pt; text-align: center;"><img src="http://localhost:9090/images/f0f83ca87a9240d1b0ac24d3dbba6340.png" alt="" data-href="" style="width: 739.00px;height: 507.89px;"></p><p style="text-indent: 22.6pt; text-align: center;"><span style="color: black; background-color: white; font-family: 宋体;">（何氏大宗祠屏风）</span></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">在何氏大宗祠前的小广场上，树立着六对旗杆夹，村里人习惯将这里叫做</span><span style="color: black; background-color: white; font-family: 宋体;"><strong>“举人台”。</strong></span></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">竖举人旗杆夹挂旗帜，是清代珠三角的民间风俗。当时，谁家子弟若是中举，都要到家族的祠堂前竖旗杆夹挂旗帜，旗帜上面写上中举人的姓名、中举名次等。举人旗杆夹就是举人旗帜的底座，上面也会刻上有关中举人的信息。</span></p><p style="text-indent: 25.6pt; text-align: center;"><img src="http://localhost:9090/images/9fa35a68cf714e11ad40c6c83a40fd1b.jpg" alt="" data-href="" style="width: 732.00px;height: 532.97px;"></p><p style="text-indent: 25.6pt; text-align: center;"><span style="color: black; background-color: white; font-family: 宋体;">（功名旗杆夹）</span></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">在其中一对旗杆夹的侧面，还能看到“戊子科中式顺天乡试二十七名何成浩”的字样，其他的旗杆夹上“咸丰”“光绪”“道光”等清代的年号仍然可见。</span></p><p style="text-indent: 25.6pt; text-align: center;"><img src="http://localhost:9090/images/2d2b35d7b4f94f9f928f4616f138e263.jpg" alt="" data-href="" style="width: 712.00px;height: 533.31px;"></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">横梁有岩金木通花图案，瓦脊陶饰灰雕、四方瓦筒(注：四方瓦筒须经朝廷特许)，雕刻图案除了花草树木还有人物造型，</span><span style="color: black; background-color: white; font-family: 宋体;"><strong>正门石柱更罕有“皇罗伞”人物的石雕，</strong></span><span style="color: black; background-color: white; font-family: 宋体;">地面铺以整条长麻石。在古时“皇罗伞”是皇家专用物，在宗族祠堂中被允许使用，</span><span style="color: black; background-color: white; font-family: 宋体;"><strong>则彰显着一个家族莫大的荣耀。</strong></span></p><p style="text-indent: 25.6pt;"><br></p><h3><strong>&gt;大夫祠</strong></h3><p style="text-align: center;"><img src="http://localhost:9090/images/56ba071d62c1413e958a36fb6ab369c7.jpg" alt="" data-href="" style="width: 677.00px;height: 433.53px;"></p><p style="text-indent: 25.6pt;"><span style="color: black; background-color: white; font-family: 宋体;">大夫祠始建于明代，清光绪七年(1881年)重建，为何姓祠堂，占地面积 611平方米。大夫祠在建筑方面与传统的祠堂不同，坐南向北，面阔三间，进深二进带两层后楼，特别后座是分上、下两层独立的楼房结构，这在乐从大大小小的祠堂中是独一无二的。三间三选，第三进高2层，寓意着“步步高升”，这也是小布科举文化的见证。大夫祠为顺德区不可移动文物名录单位，曾作工厂，位于小布村大石街。</span></p><p style="text-indent: 25.6pt; text-align: center;"><img src="http://localhost:9090/images/da2457fe918940e38af0a8382baa52d0.png" alt="" data-href="" style="width: 716.00px;height: 432.59px;"></p><p><br></p>`
        },
        {
          id: 'anchor_3',
          title:'一如院子茶馆',
          article:`<h2 style="text-align: center;">一如院子茶馆</h2><p style="text-indent: 12pt;"><span style="font-family: 宋体;">小隐于野，大隐于市，在乐从小布村阡陌交通处，有一家茶馆将寒意与繁忙阻隔于绣花木门外，围起了一方雅室，煮好了一盏热茶，等待人们归来田园，细品慢生活。</span></p><p style="text-align: center;"><strong>壹</strong></p><p style="text-align: center;"><strong>茶香室雅心清静，</strong></p><p style="text-align: center;"><strong>旧院落翻新岭南特色</strong></p><p style="text-align: center;"><span style="font-family: 宋体;"> </span></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">随着“中式、古风、国潮”蔚然成风，复古潮流不断兴起，佛山也迎来了新中式茶馆的热潮，茶室逐渐成为了都市人周末休闲的好去处。</span></p><p style="text-indent: 21pt;"><span style="color: rgb(114, 192, 64); font-family: 宋体;"><strong>区别于各色茶馆，一如院子茶馆把品茗之所开进了乐从小布村的青砖瓦顶间，通过活化改建乡村旧建筑，还原古色古香的岭南味道，重新打造出亭台楼阁、叠石曲水的清幽雅室。</strong></span></p><p style="text-indent: 21pt; text-align: center;"><img src="http://localhost:9090/images/5940029774df4decbecd042689f25618.jpg" alt="" data-href="" style="width: 321.00px;height: 481.50px;"></p><p style="text-indent: 21pt;"><span style="color: rgb(114, 192, 64); font-family: 宋体;">"</span><span style="color: rgb(114, 192, 64); font-family: 宋体;"><strong>茶馆和其他饮品店是有区别的，它的节奏会慢很多，商业性质也少很多，把茶馆建在乡村里，就能够让我把节奏放得很慢很慢，不用着急去做什么事情，这里的环境也能够让人心情变好。"</strong></span></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">一如院子茶馆的主理人文静认为，一个好的品茗环境能够让茶客心境平和，其中带来的情绪价值才是茶客们更加看重的。</span></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">走近院落中，映入眼帘的便是院子中庭的园林景观。青翠的绿意与木色相映成趣，隐隐茶香氤氲四周，不禁让人觉得暖意融融。</span></p><p style="text-indent: 21pt; text-align: center;"><img src="http://localhost:9090/images/d49bf625b448493dacd9f0e1fbe71891.jpg" alt="" data-href="" style="width: 476.94px;height: 267.60px;"></p><p style="text-indent: 21pt; text-align: center;"><img src="http://localhost:9090/images/92a837474e7e49ef93b0cbdeb0e638c6.jpg" alt="" data-href="" style="width: 469.94px;height: 263.68px;"></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">绿油油的青苔懒趴在石上，带来了湿润自然的氛围，处处皆是老板悉心运营的踪影。</span></p><p style="text-indent: 21pt; text-align: center;"><img src="http://localhost:9090/images/7510a4aade5d4220a936b4ab39e3d278.jpg" alt="" data-href="" style="width: 466.94px;height: 311.26px;"></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">伴随着茶客的笑声不断，院中景观流水缕缕，隐约的水声与风铃响声交错，让人仿佛置身于山中溪前，自有悠哉韵味。</span></p><p style="text-indent: 21pt; text-align: center;"><img src="http://localhost:9090/images/698304c1ccbc4c75a73a71c686073b28.jpg" alt="" data-href="" style="width: 365.94px;height: 243.95px;"><img src="http://localhost:9090/images/7a8653b9b5f0499c918b8e607169095b.jpg" alt="" data-href="" style="width: 348.94px;height: 232.61px;"><img src="http://localhost:9090/images/46eed70722ec490b851a47d3dac97ecc.png" alt="" data-href="" style="width: 742.94px;height: 493.90px;"></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">茶馆中既有开放的吧台品茗位置，也有中式包间和榻榻米包间，能够满足不同人数和多种需求。</span></p><p style="text-indent: 21pt; text-align: center;"><img src="http://localhost:9090/images/a99fe5187cd64a34a2a10ff43632dbe6.jpg" alt="" data-href="" style="width: 318.94px;height: 212.57px;"><img src="http://localhost:9090/images/63a3a0ef936c4a239d950349da4de444.jpg" alt="" data-href="" style="width: 311.94px;height: 207.93px;"><img src="http://localhost:9090/images/0848e82b893548ce98e831ba150831ae.jpg" alt="" data-href="" style="width: 634.94px;height: 423.29px;"></p><p style="text-indent: 21pt; text-align: center;"><br></p><p style="text-align: center;"><strong>贰</strong></p><p style="text-align: center;"><strong>以茶会友，以诚待客</strong></p><p style="text-align: center;"><strong>一壶好茶享一段好时光</strong></p><p style="text-align: center;"><br></p><p style="text-indent: 21pt;">文静始终认为，茶馆的经营需以茶客个人体验为重，<span style="color: rgb(114, 192, 64);"><strong>“不但要泡好一壶茶，更要为客人泡一壶好茶。”</strong></span></p><p style="text-indent: 21pt; text-align: center;"><img src="http://localhost:9090/images/8ca497c0e4814a7b959cb20c12184246.gif" alt="" data-href="" style=""></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">红茶、绿茶、单丛茶......文静严格把握茶的品质，真正以“茶”作为重心，心无旁骛地用好茶招待客人。</span></p><p style="text-indent: 21pt; text-align: center;"><img src="http://localhost:9090/images/f569542ce3fa42d2a04fcb2b4374caad.gif" alt="" data-href="" style=""></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">随着热水灌入，浓厚的茶香伴着雾气飘升四散，通过鼻腔流入，让人心境不由得平和下来。</span></p><p style="text-indent: 21pt; text-align: center;"><img src="http://localhost:9090/images/d88ce37dd4054a588f51612e38af5478.jpg" alt="" data-href="" style="width: 486.94px;height: 273.20px;"></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">“有的客人甚至是大老远开车过来的，肯定不想只是坐一会儿就走，所以我也开设了一些套餐，加入了糕点、水果以及干果等，让大家品茶时间久一点，更舒服一点。”</span></p><p style="text-indent: 21pt; text-align: center;"><img src="http://localhost:9090/images/c4caef2a7f874faaaa0894d158ec9a9d.jpg" alt="" data-href="" style="width: 484.94px;height: 272.09px;"></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">为了丰富茶客们的体验感，文静也设置了“无限续茶”。另外，如果客人在品完一泡茶后想尝试另一款茶，文静也表示非常欢迎。</span></p><p style="text-indent: 21pt;"><br></p><p style="text-align: center;"><strong>叁</strong></p><p style="text-align: center;"><strong>围炉煮茶，归园田居</strong></p><p style="text-align: center;"><strong>感受草木间品茗的慢生活</strong></p><p style="text-align: center;"><br></p><p style="text-align: center;"><img src="http://localhost:9090/images/3780381f76b24de5b96b10672a2378ed.jpg" alt="" data-href="" style="width: 539.00px;height: 404.05px;"><img src="http://localhost:9090/images/67d8b303f1d34447b6be0f1eb9af9bc2.jpg" alt="" data-href="" style="width: 531.94px;height: 398.95px;"></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">一如院子刚重建改造的时候，房主曾表示，房子始建年代久远，希望房子不要装修得过于现代化。保留乡村自然元素，便成了设计建筑团队的一大命题。</span></p><p style="text-indent: 21pt;"><span style="font-family: 宋体;">设计师认为，“茶本身就是人与自然连接的方式，人在草木中品茗，把自然与古建筑相融合，能够打造一个更松弛舒适的茶空间。”</span></p><p style="text-indent: 21pt; text-align: center;"><img src="http://localhost:9090/images/31b5df8d26c44c9eb11907a21ec9cdcf.png" alt="" data-href="" style="width: 583.00px;height: 266.64px;"><img src="http://localhost:9090/images/10ea942a833d416594bc775c82f8e739.png" alt="" data-href="" style="width: 566.94px;height: 259.31px;"></p><p style="text-indent: 21pt;">因此，他们将最早的3平方米园林，改至现在的12平方米左右，同时以木饰增添了古朴雅致的韵味。</p><p style="text-indent: 21pt;">“刚开始做的时候，村民们都很好奇我们会把这里变成什么样子。现在茶馆建成后，他们时不时也会过来看一下，逐渐也觉得在村里有这么一个地方挺自豪的。”对于村里的这个新鲜地标，小布村的村民们也表示欢迎与支持。</p><p style="text-align: center;"><img src="http://localhost:9090/images/7046adb31480400e81d45ac5c7ee0cd9.jpg" alt="" data-href="" style="width: 549.94px;height: 308.56px;"></p><p style="text-indent: 21pt;">除了茶馆，以设计建设牵头，<span style="color: rgb(114, 192, 64);"><strong>把古建筑改造成茶室，把桑基鱼塘改建成餐吧，聚焦乡村活化改造，深度发掘乡村资源，发展乡村文旅产业</strong></span>，他们将更多休闲娱乐产业带进乡村，让越来越多的年轻人常回乡村，爱上乡村。</p><p style="text-indent: 21pt;">未来，文静希望能够将茶馆打造成一个更加有温度，更加有故事感的茶空间，<span style="color: rgb(114, 192, 64);"><strong>让茶客能够舒服自在地品茶叹生活，归来田园，所见之处皆是美好。</strong></span></p><p style="text-align: center;"><img src="http://localhost:9090/images/bdd22c7edc394c0984f9fb77889f68e8.jpg" alt="" data-href="" style="width: 572.94px;height: 321.48px;"></p><p><br></p>`
        },
        {
          id: 'anchor_4',
          title:'村落改造',
          article:`<h2 style="text-align: center;"><span style="color: rgb(192, 0, 0); font-family: 宋体;">村落改造</span></h2><p><strong>&gt;滨河景观带（小布段）建设工程</strong></p><p style="text-align: center;"><span style="color: rgb(34, 34, 34);">滨河景观带（小布段）建设工程是</span></p><p style="text-align: center;"><span style="color: rgb(255, 169, 64);"><strong>乐从镇2020年启动的</strong></span></p><p style="text-align: center;"><span style="color: rgb(255, 169, 64);"><strong>重大民生工程项目</strong></span></p><p style="text-align: center;"><span style="color: rgb(114, 192, 64);"><strong>佛山市中心城区城市形态提升项目</strong></span></p><p style="text-align: center;"><img src="http://localhost:9090/images/8cb2a45a2d0e4e72a2e791031acfad9e.png" alt="" data-href="" style="width: 492.94px;height: 277.50px;"></p><p style="text-align: center;"><span style="color: rgb(34, 34, 34);">项目全长约1.5公里</span></p><p style="text-align: center;"><span style="color: rgb(34, 34, 34);">打造建有鸟巢景观塔、</span></p><p style="text-align: center;"><span style="color: rgb(34, 34, 34);">交通模拟小场景、巴士站台</span></p><p style="text-align: center;"><span style="color: rgb(34, 34, 34);">古罗马长条住宅森林、和平广场等</span></p><p style="text-align: center;"><span style="color: rgb(34, 34, 34);">富有德国元素的主题园区</span></p><p style="text-align: center;"><img src="http://localhost:9090/images/d4e53e61865d462c93b10ff39a73d8ac.jpg" alt="" data-href="" style="width: 504.94px;height: 276.77px;"></p>`
        }
      ],
      editor: null,
      editorConfig: {
        placeholder: '请输入内容...',
        readOnly: true
      },
      mode: 'simple', // or 'simple'
    }
  },
  mounted() {

  },
  methods: {
    // 处理锚点滚动事件
    scrollChange() {
      this.$refs.anchor.handleScrollChange()
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }

}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="less" scoped>
  .home {
    width: 80%;
    margin: auto;

    .title {
      display: flex;
      margin: 30px 0 0 0;
      background-color: #fff;
      padding: 15px;
      justify-content: flex-start;
      border-radius: 5px;
      font-size: 20px;
    }

    .content {
      display: flex;
      justify-content: flex-end;
      padding: 30px 0;
      position: relative;
      margin: auto;
      min-width: 1040px;
      flex-wrap: wrap;

      .content-center {
        display: flex;
        justify-content: flex-end;
        max-height: 520px;
        ul {
          height: 100%;
          overflow-y: auto;
          width: 72%;
          border-radius: 5px;
        }
        .item {
          background-color: #fff;
          padding: 30px;
          border-radius: 5px;
        }
      }
    }
  }


  /*滚动条整体粗细样式*/
  ::-webkit-scrollbar {
    /*高宽分别对应横竖滚动条的尺寸*/
    width: 8px;
    height: 8px;
  }

  /*滚动条里面小方块*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    /* 颜色 */
    /* background:#b6b6b6!important; */
    /* 线性渐变背景 */
    //background-image: linear-gradient(45deg, #ffbd61 25%,#ffbd61 25%, #ff8800 25%, #ff8800 50%,#ffbd61 50%, #ffbd61 75%, #ff8800 75%, #ff8800 100%)!important;
  }

  /*滚动条轨道*/
  ::-webkit-scrollbar-track {
    border-radius: 10px !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: #EDEDED !important;
  }
</style>


